<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 整体架构 Mini 版实现</title>
    <style>
      .color-turquoise {
        color: turquoise;
      }
    </style>
  </head>
  <body>
    <div id="app" style="color: red; font-size: 20px">
      我的姓名是：{{name}}，请多多关照~
      <h1 :class="className">{{ name }}</h1>
      <ul>
        <li style="color: green" :data-age="age">{{ age }}</li>
        <li :style="jobStyle">{{ info.job }}</li>
        <li>{{ info.students }}</li>
      </ul>
      <button id="clickEvent" @click="onClickEvent">点击事件</button>
    </div>

    <script src="dist/index.umd.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-template-ast-compiler"></script> -->
    <script>
      // options API
      // 模板: render  >  template   >  html式模板
      let vm = new Vue({
        el: '#app',
        data() {
          return {
            name: '晓滨',
            age: 34,
            info: {
              job: 'teacher',
              students: [
                {
                  id: 1,
                  name: '小张',
                },
                {
                  id: 2,
                  name: '小王',
                },
              ],
            },
            hobby: ['piano', 'travel', 'film'],
            jobStyle: {
              color: 'teal',
            },
            className: '',
          };
        },
        methods: {
          onClickEvent() {
            this.name = '晓滨';
            this.info.students.push({
              id: Math.floor(Math.random() * 100 + 1),
              name: '小红',
            });
          },
        },
      });

      setTimeout(function () {
        vm.name = 'Benson';
        vm.className = 'color-turquoise';
      }, 1000);
    </script>
  </body>
</html>
